import React, {useState,} from 'react'
import {createForm} from 'rc-form'
import {connect} from 'react-redux'
// antd-mobile
import {NavBar, Icon, Tabs, Picker,} from 'antd-mobile'

// constants
import constants from "../../utils/constants"

// components
import Profit from "./components/Profit/Profit"
import Withdraw from "./components/Withdraw/Withdraw"

// mock data
// import {withdrawList} from "../../utils/mockdata"
import {months,} from "../../utils/mockdata"

// icon
import PickerIcon from "../../res/images/web/shared/small-down-color-arrow.png"
import TabWithCustomUnderline from "../../layouts/TabWithCustomUnderline/TabWithCustomUnderline";

const RevenueContainer = (props) => {

    // state
    const [month, setMonth] = useState('')
    const [type, setType] = useState('')
    // props
    const {history, form: {getFieldProps,},} = props

    // dispatch
    const {doWithdrawLogs,} = props

    // templates
    const tabs = [
        {title: '收益', value: 'profit',},
        {title: '提现', value: 'withdraw',},
    ]

    const fetchDate = async month => {
        setMonth(month)
        const uid = localStorage.getItem('userid')
        const now = new Date()
        const y = now.getFullYear()
        const d = now.getDate()
        const bt = `${y}-${month}-${d}`
        const p = 1
        if (type === 'withdraw') {
            doWithdrawLogs({uid, bt, p,})
        }
    }

    const monthPicker = (
        <Picker
            {...getFieldProps('month')}
            extra="月份"
            data={months}
            title='月份'
            // onOk={v => fetchConsumeData(v[0])}
            onOk = {v => fetchDate(v[0])}
        >
            <div style={{color: '#000'}}>
                {month ? <span>{month}月</span> : null}
                <img src={PickerIcon} style={{marginLeft: '5px',}}/>
            </div>
        </Picker>
    )


    const leftContent = (
        <>
            <Icon type="left" color='#333' size='lg'/>
            <span className='go-back-layout-icon-title'>收支明细</span>
        </>
    )


    const navBarTemplate = (
        <NavBar
            mode='light'
            leftContent={leftContent}
            onLeftClick={() => history.goBack()}
            rightContent={monthPicker}
        />
    )

    const TabTemplate = (
        <TabWithCustomUnderline
            tabs={tabs}
            onChange={(tab) => setType(tab.value)}
        >
            <Profit />
            <Withdraw />
        </TabWithCustomUnderline>
    )


    return (
        <>
            {navBarTemplate}
            {TabTemplate}
        </>
    )
}

const mapDispatchToProps = dispatch => ({
    doWithdrawLogs: (payload) => dispatch.user.doWithdrawLogs(payload),
})

export default connect(
    null,
    mapDispatchToProps
)(createForm()(RevenueContainer))
